<template>
  <view class="content">
    <view class="nav">
      <view class="tab-scroll" scroll-x="true">
		  <view
		    class="tab-scroll_item" 
		    v-for="(item, index) in category" 
		    :key="index" 
		    :class="{'active': isActive == index}" 
		    @click="switchTab(index)"
		  >
		    {{ item.name }}
		  </view>
      </view>
    </view>
	<view class="example-body">
		<!-- <view class="in"> -->
			<uni-datetime-picker v-model="datetimerange" type="datetimerange" rangeSeparator="至" class="date"/>
		<!-- </view> -->
		<!-- <button type="default" size="mini" @tap="handleQuery">查询</button> -->
	</view>
    <swiper :current="isActive" @change="onSwiperChange" class="swiper-content">
      <swiper-item>
        <scroll-view scroll-y style="height: 100%;">
          <view class="nav_item">
            <view class="nav_item-date">
				<uni-section :title="'采集时间：' + datetimerange[0]" type="line"></uni-section>
			</view>
            <view class="nav_item-content">
				<view>热效率：80</view>
				<view>煤耗：20</view>
				<view>压力：30.1</view>
				<view>温度：34</view>
				<view>流量：112</view>
				<view>环保标准：二级</view>
			</view>
          </view>
		  <view class="nav_item">
		    <view class="nav_item-date">
		  		<uni-section :title="'采集时间：' + datetimerange[1]" type="line"></uni-section>
		  	</view>
		    <view class="nav_item-content">
		  		<view>热效率：90</view>
		  		<view>煤耗：20.5</view>
		  		<view>压力：20.1</view>
		  		<view>温度：37</view>
		  		<view>流量：114</view>
		  		<view>环保标准：二级</view>
		  	</view>
		  </view>
        </scroll-view>
      </swiper-item>
      <swiper-item>
        <scroll-view scroll-y style="height: 100%;">
          <view class="nav_item">
            <view>
				<uni-section :title="'热效率'" type="line"></uni-section>
            </view>
            <view class="charts-box">
				<qiun-data-charts
					type="line"
					:opts="chartOption1"
					:chartData="chartData1"
				/>
            </view>
          </view>
		  <view class="nav_item">
		    <view>
		  		<uni-section :title="'煤耗'" type="line"></uni-section>
		    </view>
		    <view class="charts-box">
		  				<qiun-data-charts
		  					type="line"
		  					:opts="chartOption1"
		  					:chartData="chartData2"
		  				/>
		    </view>
		  </view>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isActive: 0,
      category: [
        { id: 1, name: '数据列表' },
        { id: 2, name: '数据图表' }
      ],
	  datetimerange: ["2024-10-29 20:10:10", "2024-10-30 10:10:10"],
	  chartData1: {},
	  chartData2: {},
	  chartOption1: {
		padding: [15,10,0,15],
		xAxis: {
		  disableGrid: true,
		},
		yAxis: {
		  gridType: "dash",
		},
		extra: {
		  line: {
		    type: "straight",
		    width: 2,
		    activeType: "hollow"
		  }
		}
	  }
    };
  },
  onReady() {
  	this.getServerData();
  },
  methods: {
    switchTab(index) {
      this.isActive = index;
    },
    onSwiperChange(e) {
      const { current } = e.detail;
      this.isActive = current;
    },
	getServerData() {
	      //模拟从服务器获取数据时的延时
	      setTimeout(() => {
	        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
	        let res = {
	            categories: ["10-24","10-25","10-26","10-27","10-28","10-29"],
	            series: [
	              {
	                name: "热效率",
	                data: [35,8,25,37,4,20]
	              }
	            ]
	        };
	        this.chartData1 = JSON.parse(JSON.stringify(res));
			let res2 = {
			    categories: ["10-24","10-25","10-26","10-27","10-28","10-29"],
			    series: [
			      {
			        name: "煤耗",
			        data: [30,40,25,7,4,15]
			      }
			    ]
			};
			this.chartData2 = JSON.parse(JSON.stringify(res2));
	      }, 500);
	}
  }
};
</script>

<style lang="scss">
.content {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.nav {
  background-color: #fff;
  border-bottom: 1rpx solid #ebebeb;
  height: 90rpx;
}

.tab-scroll_item {
  display: inline-block;
  width: 50%;
  text-align: center;
  line-height: 90rpx;
  font-size: 30rpx;
  cursor: pointer;
  &.active {
    color: #55aaff;
    font-weight: bold;
    position: relative;
	border-bottom: 1rpx solid #55aaff;
  }
}

// .query-button{
// 	margin-left: 10rpx;
// }

.example-body{
	width: 710rpx;
	height: 50px;
	margin: 0 auto;
	// .in{
	// 	width: 710rpx;
	// 	height: 60rpx;
	// 	// background-color: #e5e5e5;
	// 	// border-radius: 15rpx;
	// }
}

.example-body .uni-datetime-picker {
    // background-color: #ffffff;
    border: 2rpx solid #cccccc;
    border-radius: 20rpx;
    font-size: 20rpx;
    color: #333333;
}

.swiper-content {
  flex: 1;
  background-color: #f5f5f5;
  .nav_item {
    padding: 10rpx;
	background-color: #fff;
	text-align: left;
	margin: 20rpx;
	font-size: 30rpx;
	color: #333;
	.nav_item-date{
		border-bottom: 2rpx solid #ccc;
	}
	.nav_item-content{
		display: grid;
		grid-template-columns: repeat(2,1fr);
		line-height: 60rpx;
		margin-left: 20rpx;
		margin-top: 2rpx;
		color: #666;
	}
  }
}
.charts-box {
    width: 100%;
    height: 400rpx;
}
.uni-section__content-title{
	font-size: 70rpx;
	font-weight: bold;
}
</style>